import React, { useMemo } from 'react';
import { Modal } from 'antd';
import ProForm, {
  ProFormText,
  ProFormDigit,
} from '@ant-design/pro-form';
import type { TableListItem } from './data';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<TableListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
};

const UpdateForm: React.FC<UpdateFormProps & { onVisibleChange: any }> = (props) => {
  const Form = () => useMemo(() => (
    <ProForm
    initialValues={props.values}
    onFinish={props.onSubmit}
    >
      <ProFormText
        label="菜单名"
        rules={[{ required: true, message: '必填项', },]}
        width="md"
        name="menuName"
      />
      <ProFormDigit
        label="显示顺序"
        rules={[{ required: true, message: '必填项', },]}
        width="md"
        name="orderNum"
        min={0} max={10}
      />
      <ProFormText
        label="路径"
        rules={[{ required: true, message: '必填项', },]}
        width="md"
        name="path"

      />
      <ProFormText
        label="图标"
        rules={[{ required: true, message: '必填项', },]}
        width="md"
        name="icon"
      />
      <ProFormText
        label="备注"
        rules={[{ required: true, message: '必填项', },]}
        width="md"
        name="remark"
      />
    </ProForm>
  ), [props.values.menuId])
  return (
    <Modal
      width={640}
      title="修改角色"
      open={props.updateModalVisible}
      onCancel={() => {
        props.onCancel();
      }}
      footer={null}
    >
      <Form />
    </Modal>
  );
};

export default UpdateForm;
